/*
 * @描述: 工作台页面逻辑
 * @版权所有: 广东国星科技有限公司
 * @商业授权: www.mscodecloud.com
 */
import React, { PureComponent } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Card } from 'antd';
import { Widget, addResponseMessage } from 'react-chat-widget';

import 'react-chat-widget/lib/styles.css';

class Workbench extends PureComponent {

  componentDidMount() {
    addResponseMessage("欢迎使用MSCode微服务平台的即时通信功能");
  }

  handleNewUserMessage = (newMessage) => {
    console.log(`接收到消息： ${newMessage}`);
    // Now send the message throught the backend API
    addResponseMessage("好的");
  }

  render() {
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <div style={{ 'textAlign': 'center' }}>
            <div style={{ 'display': 'inline-block', 'textAlign': 'left' }}>
              <div>
                MSCode微服务平台为响应式布局，针对不同屏幕大小设计，适配电脑、平板和手机。默认为竖版布局，若需浏览横版布局，请在侧边栏设置。
              </div>
              <br />
              <div>
                MSCode微服务平台使用阿里巴巴Sentinel进行流量控制，并发量大时表格如没数据刷新即可。
              </div>
              <br />
              <div>
              <font color="blue">这是开源版本，查看更多更强的功能和商业授权在</font><a href="https://www.mscodecloud.com" target="_blank">MSCode微服务平台官网 mscodecloud.com</a><font color="blue">。我公司除了提供框架平台，也接单各种信息化项目，请联系QQ：3228979148或第4QQ群：259643738或电话微信：020-36968862 / 15011899123！</font>
              </div>
              <br />
              <div>
                MSCode微服务平台架构图
              </div>
              <div>
                <img src="https://www.mscodecloud.com/static/mscode-architecture.png" alt="MSCode微服务平台架构图" style={{ maxWidth: "100%" }} />
              </div>
            </div>
          </div>
          <div className="App">
            <Widget
              handleNewUserMessage={this.handleNewUserMessage}
              title="MSCode微服务平台"
              subtitle="即时通信"
              senderPlaceHolder="请输入..."
            />
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Workbench;
